<template>
    <div>
        <slot></slot>
        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="8" class="stretch">
                <div class="tree">
                    <el-scrollbar class="head-container my-scroll">
                        <el-tree
                            :data="deptOptions"
                            :props="defaultProps"
                            :expand-on-click-node="false"
                            :filter-node-method="filterNode"
                            :highlight-current="true"
                            ref="tree"
                            default-expand-all
                            @node-click="handleNodeClick"
                        >
                            <span class="span-ellipsis" slot-scope="{ node }">
                                <span :title="node.label">{{
                                    node.label
                                }}</span>
                            </span>
                        </el-tree>
                    </el-scrollbar>
                </div>
            </el-col>
            <el-col :span="16" class="stretch">
                <div class="table">
                    <el-table
                        v-loading="loading"
                        :data="userList"
                        ref="multipleTable"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column
                            type="selection"
                            width="50"
                            align="center"
                        />
                        <el-table-column
                            label="姓名"
                            align="center"
                            prop="nickName"
                            :show-overflow-tooltip="true"
                        />
                        <!-- <el-table-column
                        label="性别"
                        align="center"
                        prop="sex"
                        :show-overflow-tooltip="true"
                        :formatter="sexFormatter"
                    /> -->
                        <el-table-column
                            label="单位/部门"
                            align="center"
                            prop="dept.deptName"
                            :show-overflow-tooltip="true"
                        />
                        <el-table-column
                            label="身份证"
                            align="center"
                            prop="certNumber"
                            width="164"
                        />
                        <el-table-column
                            label="手机号码"
                            align="center"
                            prop="phonenumber"
                            width="110"
                        />
                        <el-table-column
                            label="芯片编号"
                            align="center"
                            prop="cardNum"
                            width="120"
                        />
                        <el-table-column
                            label="进场时间"
                            align="center"
                            prop="indate"
                        >
                        </el-table-column>
                        <el-table-column
                            label="角色"
                            align="center"
                            :formatter="roleFormatter"
                        >
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </div>
</template>
<script>
import { listUser } from "@/api/system/user";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: 'selectUsers',
    data () {
        return {
            loading: false,
            userList: [],
            deptOptions: undefined,
            defaultProps: {
                children: "children",
                label: "label"
            },
            selectedIds: {},
            // 查询参数
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deptId: undefined
            },
        }
    },
    created () {
        this.getTreeselect();
        this.getList()
    },
    methods: {
        roleFormatter (row) {
            return row.roles[0] ? row.roles[0].roleName : ''
        },
        submitForm () {
            let ids = []
            for (let key in this.selectedIds) {
                ids = ids.concat(this.selectedIds[key].flat())
            }
            ids = [...new Set(ids)]
            this.$emit('selectFn', ids, this.clearSelected)
        },
        clearSelected () {
            this.selectedIds = []
            this.$refs.multipleTable.clearSelection();
        },
        handleSelectionChange (selection) {
            this.selectedIds[this.queryParams.deptId] = this.selectedIds[this.queryParams.deptId] ? this.selectedIds[this.queryParams.deptId] : []
            this.selectedIds[this.queryParams.deptId][this.queryParams.pageNum] = selection
        },
        /** 查询部门下拉树结构 */
        getTreeselect () {
            treeselect().then(response => {
                this.queryParams.deptId = response.data[0].id
                this.deptOptions = response.data;
            });
        },
        // 节点单击事件
        handleNodeClick (data) {
            this.queryParams.deptId = data.id;
            this.getList();
        },
        // 筛选节点
        filterNode (value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        /** 查询用户列表 */
        getList () {
            this.loading = true;
            listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                this.userList = response.rows;
                this.total = response.total;
                let selectRowIds = this.selectedIds[this.queryParams.deptId] ? this.selectedIds[this.queryParams.deptId][this.queryParams.pageNum] : []
                this.loading = false
                this.$nextTick(() => {
                    if (selectRowIds) {
                        let selectRowIdsStr = JSON.stringify(selectRowIds)
                        this.userList.forEach(item => {
                            if (selectRowIdsStr.indexOf(JSON.stringify(item)) != -1) {
                                this.$refs.multipleTable.toggleRowSelection(item);
                            }
                        })
                    }
                })
            }
            );
        },
    }
}
</script>
<style scoped>
.dialog-footer {
    padding: 20px;
    padding-top: 10px;
    text-align: right;
}
.my-scroll {
    height: 750px;
}
</style>